<template>
  <avue-draggable
    :step="step"
    :width="controllerWidth"
    :height="controllerHeight"
    :left="controllerLeft"
    :top="controllerTop"
    :disabled="controllerDisabled"
    ref="draggable"
    :index="index"
    :z-index="-1"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <component :is="type" :value="value" />
  </avue-draggable>
</template>

<script>
  import imageController from "./base/imageController";
  import textController from "./base/textController";
  import videoController from "./base/videoController";
  import scrollTextController from "./base/scrollTextController";
  import datetimeController from "./base/datetimeController";
  import liveController from "./base/liveController";




  export default {
    name: "Controller",
    components: {
      imageController,
      textController,
      videoController,
      scrollTextController,
      datetimeController,
      liveController,
    },
    model: {
      prop: "value",
      event: "input"
    },
    props: {
      index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
      type: String,
      bigscreen: Object,
      value: {
        type: [Object],
        default: () => {}
      },
      step: Number
    },
    data() {
      return {
        data: {
          setup: {},
          data: {},
          position: {}
        }
      };
    },
    computed: {
      controllerWidth() {
        return this.value.pos.width;
      },
      controllerHeight() {
        return this.value.pos.height;
      },
      controllerLeft() {
        return this.value.pos.left;
      },
      controllerTop() {
        return this.value.pos.top;
      },
      controllerDisabled() {
        return this.value.pos.disabled || false;
      },
    },
    mounted() {},
    methods: {
      handleFocus({ index, left, top, width, height }) {},
      handleBlur({ index, left, top, width, height }) {
        this.$emit("onActivated", { index, left, top, width, height });
        this.$refs.draggable.setActive(true);
      }
    }
  };
</script>

<style scoped lang="scss">
  .vue-draggalbe {
    position: absolute;
  }

  .avue-draggable {
    padding: 0 !important;
  }
</style>
